<template>
  <div class="coat">
    <el-container>
      <el-header class="theHeader" height="80px">
        <div class="buttonBox">
          <div @click="forwardTo('/unit')"><img src="@/assets/images/unitStatBlue.png" alt=""></div>
          <div @click="forwardTo('/cars')"><img src="@/assets/images/carsStatOrange.png" alt=""></div>
          <div @click="forwardTo('/company')"><img src="@/assets/images/companyStatBlue.png" alt=""></div>
        </div>
        <div class="buttonBox">
          <div @click="forwardTo('/dispatch')"><img src="@/assets/images/dispatchStatBlue.png" alt=""></div>
          <div @click="forwardTo('/expense')"><img src="@/assets/images/expenseStatBlue.png" alt=""></div>
        </div>
      </el-header>
      <el-container class="upperContainer">
        <el-main>
          <div class="theBlock">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">车辆编制属性统计</span>
              </template>
              <template #last>
                <span class="theLast">按照车辆编制属性统计车辆数量</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0,132,243,0), rgba(0,132,243,0.1));">
              <PieBar :data=dataPieBar>
                <template #theSlot>
                  <span class="theSlot">车辆总计</span>
                </template>
              </PieBar>
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thin">
              <template #first>
                <span class="theFirst">采购车辆占比统计</span>
              </template>
              <template #last>
                <span class="theLast">获得方式为购买的车辆占比</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <TagsPie :data=dataTagsPie />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
        <el-main class="middleMain">
          <el-select :suffix-icon="PointerDown" :teleported="false" class="middleSelect" v-model="middleSelect"
            value-key="" placeholder="地区" @change="">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <div class="middleNumber alter">
            <span class="middleNumberTitle" style="font-size: 24px;">车辆总计</span>
            <span style="font-size: 40px;color: #fff;">1,231,321</span>
          </div>
          <img src="@/assets/images/carsCar.png" alt="" style="position: absolute;top: 300px;">
        </el-main>
        <el-main class="rightMain">
          <div class="theBlock">
            <TheTitle theSize="small" theType="thicken">
              <template #first>
                <span class="theFirst">新能源车辆统计</span>
              </template>
              <template #last>
                <span class="theLast">按照是否是新能源车进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <SharpBar :data=dataSharpBar />
            </div>
          </div>
          <CuttingLine theSize="small" />
          <div class="theBlock" style="margin-top: 20px;">
            <TheTitle theSize="small" theType="thicken">
              <template #first>
                <span class="theFirst">新能源车辆燃料类型统计</span>
              </template>
              <template #last>
                <span class="theLast">按照燃料类型对新能源车进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to right, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <DoubleDeckPie :data=dataDoubleDeckPie />
            </div>
          </div>
          <CuttingLine theSize="small" />
        </el-main>
      </el-container>
      <el-container>
        <el-main class="downMain">
          <div class="block">
            <TheTitle theSize="medium" theType="thin">
              <template #first>
                <span class="theFirst">车辆类型统计</span>
              </template>
              <template #last>
                <span class="theLast">按车辆类型对车辆进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <FilledSinglePie :data=dataFilledSinglePieOne />
            </div>
          </div>
          <CuttingLine theSize="medium" />
          <div class="block" style="margin-top: 20px;">
            <TheTitle theSize="medium" theType="thin">
              <template #first>
                <span class="theFirst">车辆利用率统计</span>
              </template>
              <template #last>
                <span class="theLast">统计车辆的实际使用时间占总可用的比例</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <SinglePie :data=dataSinglePieOne />
            </div>
          </div>
          <CuttingLine theSize="medium" />
        </el-main>
        <el-main class="downMain">
          <div class="block">
            <TheTitle theSize="medium" theType="thin">
              <template #first>
                <span class="theFirst">车辆价格区间</span>
              </template>
              <template #last>
                <span class="theLast">统计车辆的实际使用时间占总可用时间的比例</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <FilledSinglePie :data=dataFilledSinglePieTwo />
            </div>
          </div>
          <CuttingLine theSize="medium" />
          <div class="block" style="margin-top: 20px;">
            <TheTitle theSize="medium" theType="thin">
              <template #first>
                <span class="theFirst">车辆封车记录</span>
              </template>
              <template #last>
                <span class="theLast">按照封车状态对车辆进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <SinglePie :data=dataSinglePieTwo />
            </div>
          </div>
          <CuttingLine theSize="medium" />
        </el-main>
        <el-main class="downMain">
          <div class="block">
            <TheTitle theSize="medium" theType="thin">
              <template #first>
                <span class="theFirst">车辆燃料类型统计</span>
              </template>
              <template #last>
                <span class="theLast">按照燃料类型对车辆进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <FilledSinglePie :data=dataFilledSinglePieThree />
            </div>
          </div>
          <CuttingLine theSize="medium" />
          <div class="block" style="margin-top: 20px;">
            <TheTitle theSize="medium" theType="thin">
              <template #first>
                <span class="theFirst">车辆处置记录</span>
              </template>
              <template #last>
                <span class="theLast">按照处置形式对处置车辆进行统计</span>
              </template>
            </TheTitle>
            <div style="background: linear-gradient(to left, rgba(0, 132, 243, 0), rgba(0, 132, 243, 0.1)); ">
              <SinglePie :data=dataSinglePieThree />
            </div>
          </div>
          <CuttingLine theSize="medium" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { forwardTo } from '@/hook/forwardTo';
import { reactive, computed, ref, onMounted } from 'vue';

import TheTitle from '@/components/TheTitle.vue';
import CuttingLine from '@/components/CuttingLine.vue';
import PieBar from '@/components/PieBar.vue';
import TagsPie from '@/components/TagsPie.vue';
import SinglePie from '@/components/SinglePie.vue';
import DoubleDeckPie from '@/components/DoubleDeckPie.vue';
import SharpBar from '@/components/SharpBar.vue';
import FilledSinglePie from '@/components/FilledSinglePie.vue';

import PointerDown from '@/components/PointerDown.vue'

const middleSelect = ref('')
const options = [
  {
    value: '石家庄',
    label: '石家庄'
  },
  {
    value: '',
    label: '清空选项'
  }
]

const physicalProtect = 4907
const classifiedMail = 3135
const emergencySecurity = 2317
const retiredCadre = 2045
const dataPieBar = reactive({
  dataX: [physicalProtect, classifiedMail, emergencySecurity, retiredCadre],
  dataY: ['实物保障', '机要通信', '应急保障', '退休干部',],
  sum: computed(() => {
    return physicalProtect + classifiedMail + emergencySecurity + retiredCadre
  }).value,
  theColorList: ['#35e0ff', '#1c60fe', '#40cc97', '#e7a252'],
  pieId: 'carCompiePie',
  barId: 'carCompieBar',
})

const dataTagsPie = {
  data: [
    { value: 12454, name: '采购车辆' },
    { value: 24908, name: '其他车辆' }],
  sum: 37362,
  id: 'purchaseCars',
  type: 'value',
  theColorList: ['#ffffff', '#35e0ff',]
}

const dataSharpBar = {
  dataX: ['现有', '环比',],
  dataY: [750, 410,],
  tag: {
    name: '新能源车',
    value: '212',
    percent: '20'
  },
  id: 'sharpBar'
}

const dataDoubleDeckPie = {
  id: 'newEnergyCarFuel',
  data: [
    { value: 12454, name: '插电式' },
    { value: 13454, name: '插电混合' },
    { value: 14454, name: '汽油' },
    { value: 15454, name: '油电混合' },
  ],
  sum: 55816,
  theColorList: ['#10ffff', '#10ff61', '#4053ff', '#108cff',],
  innerContent: { text: '新能源车辆', value: '435' }
}

const dataFilledSinglePieOne = {
  id: 'filledSinglePieOne',
  data: [
    {
      value: 12454, name: '越野车'
    }, {
      value: 17198, name: '车野越'
    }, {
      value: 17198, name: '商务车'
    }, {
      value: 17198, name: '其他'
    }
  ],
  theColorList: ['#35e0ff', '#2969ff', '#7aa2ff', '#39ffb4',],
}

const dataSinglePieOne = {
  id: 'singlePieOne',
  data: [
    {
      value: 12454, name: '实际使用'
    }, {
      value: 17198, name: '未使用'
    }
  ],
  sum: 29652,
  theColorList: ['#e3c882', '#03deff'],
  type: 'percent',
  percentInner: { text: '车辆利用率', percent: '42%' }
}

const dataFilledSinglePieTwo = {
  id: 'filledSinglePieTwo',
  data: [
    {
      value: 12454, name: '5-10W'
    }, {
      value: 17198, name: '10-15W'
    }, {
      value: 17198, name: '15-20W'
    }, {
      value: 17198, name: '20W以上'
    }
  ],
  theColorList: ['#35e0ff', '#2969ff', '#7aa2ff', '#39ffb4',],
}

const dataSinglePieTwo = {
  id: 'singlePieTwo',
  data: [
    {
      value: 12454, name: '封车状态'
    }, {
      value: 17198, name: '未封车'
    }
  ],
  sum: 29652,
  theColorList: ['#ff6f5b', '#0176ff'],
  type: 'percent'
}

const dataFilledSinglePieThree = {
  id: 'filledSinglePieThree',
  data: [
    {
      value: 12454, name: '汽油'
    }, {
      value: 17198, name: '柴油'
    }, {
      value: 17198, name: '混合动力'
    }, {
      value: 17198, name: '天然气'
    }
  ],
  theColorList: ['#35e0ff', '#2969ff', '#7aa2ff', '#39ffb4',],
}

const dataSinglePieThree = {
  id: 'singlePieThree',
  data: [
    {
      value: 12454, name: '捐赠'
    }, {
      value: 13198, name: '调拨'
    }, {
      value: 14198, name: '核销'
    }, {
      value: 15198, name: '报废'
    }
  ],
  sum: '42%',
  theColorList: ['#9e7bff', '#006dee', '#ffe7a8', '#39ffb4'],
  sumOrSingle: '车辆利用率'
}

const emit = defineEmits(['theScrollBarExist'])
onMounted(() => {
  const hasScrollbar = computed(() => {
    return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight)
  });
  emit('theScrollBarExist', hasScrollbar.value)
})

</script>
<style scoped>
.alter {
  width: 671px;
  height: 105px;
  background-image: url('@/assets/images/carsMiddleNumber.png');
}
</style>
